<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="hpyhwq">
        <title>3D变化</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html,body{
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 14px;
                background-color: lightgoldenrodyellow;
            }
            div{
                width: 600px;
                height: 600px;
                margin: 20px auto;
                position: relative;
                opacity: 0.8;
                /* 设置一下父元素的3D变化 */
                transform-style: preserve-3d;
                /* 设置观察者的位置，也就是z轴的范围 */
                -webkit-perspective: 400px;
                /* 参考点 */
                transform-origin: left bottom;            
                }
            section{
                width: 300px;
                height: 300px;
                border: 1px solid red;
                background-image: url(./mao.png);
                background-size: contain;
            }
            .one section{
                /* 参数一表示x轴，参数二表示y轴，参数三表示z轴 */
                transform: translate3d(20px,30px,50px);
            }
            .two section{
                /* x轴表示左右拉伸 y轴表示上下拉伸 z轴表示前后拉伸 */
                transform: scale3d(0.5,0.5,0.5) rotate(30deg);
                /* 单独设置z轴，在缩放的时候，必须添加rotate旋转角度 */
                transform: scaleZ(1.5) rotate(45deg);
            }
            .three section{
                /* 这是一种简写的表示方式，参数分别表示z，y，z轴，旋转角度 */
                /* 参数表示是否沿着该轴线旋转，如果是则是1，若不是，则为0 */
                transform: rotate3d(1,1,0,50deg);
            }
        </style>
    </head>
    <body>
        <div class="one">
            <section></section>
        </div>
        <div class="two">
            <section></section>
        </div>
        <div class="three">
            <section></section>
        </div>
        <div class="four">
            <section></section>
        </div>
        <div class="five">
            <section></section>
        </div>
        <div class="six">
            <section></section>
        </div>
    </body>
</html>